<template>
  <div>
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item>
        <el-input v-model="mobile" placeholder="请输入用户的手机号" @keyup.enter="getList" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">搜索</el-button>
      </el-form-item>
    </el-form>
    <div>
      <h3 v-if="data.length > 0">生涯测评结果</h3>
      <h3 v-if="data.length <= 0">没有找到匹配的结果</h3>
      <Result v-for="x in data" :key="x.id" :data="x" />
    </div>
  </div>
</template>

<script>
import { careers } from '../../../api/careers'

export default {
  name: 'Index',
  components: {
    Result: () => import('./result')
  },
  data() {
    return {
      mobile: '',
      data: []
    }
  },
  methods: {
    getList() {
      this.data = []
      if (!this.mobile) {
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '查询中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      careers({
        mobile: this.mobile
      }).then(res => {
        console.log(res)
        this.data = res
      }).finally(() => {
        loading.close()
      })
    }
  }
}
</script>

<style scoped>

</style>
